﻿
<CnGalWebSite.Components.Containers.MasaTitleContainer Title="库存排行榜" Icon="@IconType.Users.ToIconString()" Class="mb-4" Outline Collapable>
    @foreach (var item in Model)
    {
        <MDCard Href="@("/space/index/"+item.Id)" Class=" w-100 mb-4">
            <div class="a-font-color w-100" style="display: flex; flex-direction: row; justify-content: space-around; align-items: center; gap: .5rem; padding: .5rem;">
                <div class="headline-medium primary-text fw-bold ms-2 me-2">
                    @(Model.IndexOf(item) + 1)
                </div>
                <div style="display:flex; gap: .5rem;" class="w-100">
                    <div style="display: flex;align-items: center;">
                        <img class="shadow-sm" src="@item.Image" style="height: 45px;width: 45px;border-radius: 50%;" />
                    </div>
                    <div style="display: flex;flex-wrap: wrap;flex-direction: column;">
                        <div style="display: flex;flex-wrap: wrap;">
                            <div class="title-medium me-2">@item.Name</div>
                            <CnGalWebSite.Shared.MasaComponent.Shared.Cards.Ranks.RanksViewCard Model="item.Ranks" Outline />
                         </div>
                         <div class="label-large text-truncate-2" >@item.PersonalSignature</div>
                     </div>
                 </div>

                 <div class="primary-text title-medium me-2">
                     @item.Count
                 </div>
             </div>
         </MDCard>
    }
</CnGalWebSite.Components.Containers.MasaTitleContainer>

@code {
    [Parameter]
    public List<HasMostGamesUserModel> Model { get; set; }
}
